<template>
     <div ref="main" :style='{width:width,height:height}' :class="className"></div>
</template>
<script>
import * as echarts from 'echarts';
//引入主题  npm安装
require('echarts/theme/macarons')
//自适应窗口大小
import resize from './mixins/resize'
export default {
    mixins:[resize],
    props:{
        className:{
            type:String,
            default:'chart'
        },
        width:{
            type:String,
            default:'100%'
        },
        height:{
            type:String,
            default:'400px'
        },
        legendData:{//顶部图例
            type:Array,
            default:()=>['前端','java','移动端','大数据']
        },
        seriesData:{
            type:Array,
            default:()=>[   //饼状图分配的数据
                {value:100,name:'前端'},
                {value:200,name:'java'},
                {value:500,name:'移动端'},
                {value:1300,name:'大数据'}
            ]
        }
    },
    data(){
        return{
                chart:null   //echarts对象
        }
    },
    mounted() {
        //初始化dom后，在初始化echarts
         this.$nextTick(() => {
             this.initChart()
         })
    },
    //组件销毁之前调用
    beforeDestroy() {
        //如果是空
        if(!this.chart){
            return
        }
        //如果不是空  将其置为null
        this.chart.dispose()
        this.chart=null
    },
    methods: {
        //初始化echarts   关于图标的初始化配置
        initChart(){
            //注意是$refs
            this.chart=echarts.init(this.$refs.main,'macarons')

            this.chart.setOption({
                title: {  //标题
                    text: '各技术频道文章统计',
                    //subtext: '纯属虚构',  副标题
                    left: 'center'  //设置标题的位置
                },
                tooltip: {//提示框
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {//顶部图例信息
                    orient: 'vertical',
                    left: 'left',   //设置图例的位置
                    data:this.legendData
                },
            series: [
                {
                    name: '统计内容',
                    type: 'pie', //斌状图的配置
                    radius: '55%',//大小的设置
                    center: ['50%', '50%'],//并的位置设置   左  上
                    data:this.seriesData,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,//设置阴影的大小
                            shadowOffsetX: 0,//阴影的水平方向偏移距离
                            shadowColor: 'rgba(0, 0, 0, 0.5)'//设置阴影的颜色
                        }
                    }
                }
            ]
})
        }
    }
}
</script>